<template>
  <div id="attention">
    <!-- 这页是动态里面的关注页 -->
    <div class="guanzhu">
      <ul>
        <li v-for="(item, index) of articleList.arr" :key="index">
          <!-- 渲染数据库中的后4条数据 -->
          <div v-if="index < 5">
            <!-- 表头部分，包含头像，昵称，时间 -->
            <div class="head">
              <div class="tou"><img :src="item.url" alt="" /></div>
              <div class="timu">
                <div class="name">{{ item.title }}</div>
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
            <!-- 正文部分，包含标题和正文 -->
            <div class="wenzhang">
              <div class="xiaowen">{{ item.samlltitle }}</div>
              <div class="dawen">{{ item.wenzhang }}</div>
            </div>
            <!-- 点击部分，包含转发，评论，点赞 -->
            <div class="xiaotu">
              <span><img src="../../../assets/images/转发.png" alt="" /></span
              ><span class="gezi">{{ item.transpond }}</span>
              <span><img src="../../../assets/images/评论.png" alt="" /></span
              ><span class="gezi">{{ item.comment }}</span>
              <span><img src="../../../assets/images/点赞.png" alt="" /></span
              ><span class="gezi">{{ item.like }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//渲染列表的方法
import { reactive, onMounted } from "vue";
export default {
  setup() {
    let articleList = reactive({ arr: [] });
    const wenzi = () => {
      fetch("http://8.142.22.78:3000/api/home/article")
        .then((response) => response.json())
        .then((res) => {
          if (res.status == 0) {
            articleList.arr = res.result;
          }
        });
    };
    onMounted(() => {
      wenzi();
    });
    return {
      wenzi,
      articleList,
    };
  },
};
</script>
<style lang="less" scoped>
#attention {
  width: 100%;
  height: 100%;
  margin-bottom: 70px;
  .guanzhu {
    width: 100%;
    padding-left: 16px;
    padding-right: 40px;
    font-size: 12px;
    .head {
      height: 46px;
      margin-top: 24px;
      .tou {
        float: left;
        img {
          width: 42px;
          height: 42px;
        }
      }
      .timu {
        float: left;
        margin-top: 7px;
        margin-left: 9px;
        .name {
          font-weight: 600;
          font-family: "楷体";
          font-size: 15px;
        }
        .time {
          color: #999999;
          margin-top: 5px;
        }
      }
    }
    .wenzhang {
      font-size: 15px;
      line-height: 25px;
      color: #333333;
      font-family: "楷体";
      font-weight: 600;
      margin-top: 8px;
      .dawen {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
    }
    .xiaotu {
      margin-top: 10px;
      font-size: 12px;
      color: #878a8f;
      .gezi {
        margin-left: 5px;
        margin-right: 25px;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
